<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>查看网点区域</title>

<script type="text/javascript">

//定义地图, 
var map = new BMap.Map("myMap"); // 创建Map实例
var centerPoint = new BMap.Point(121.485966, 31.239957); //初始化地图，中心点为上海中心点
map.centerAndZoom(centerPoint, 13); // 初始化地图,设置中心点坐标和地图级别
var opts = {             //设置左上角控件，地图缩放类型
	type : BMAP_NAVIGATION_CONTROL_SMALL
};
map.addControl(new BMap.NavigationControl(opts)); //添加左上角缩放控件 
map.enableScrollWheelZoom(); //可滚动缩放
map.disableDoubleClickZoom(); //关闭双击放大


	/**
	 * 获取区域的数据
	 */
	$(function(){
		$.ajax({
			type : 'post',
			url :'<%=basePath%>getNetsiteMapAreasAction',
			success : function(data) {
				initMapAreas(data);
			}
		});
	});

	/**
	 * 根据返回的data加载地图区域
	 */
	function initMapAreas(Areadata) {
		var thisNetsiteId = <%=request.getAttribute("supportID")%>;
		var color;  //多变性边框颜色
		var json = JSON.parse(Areadata);
		for(var i=0;i<json.length;i++){ //循环每一个网点
			var viewA = JSON.parse(json[i].netsiteMap);
			var thisId = json[i].id;
			if(thisId==thisNetsiteId){
				color = "#BB5500";
				if(""!=viewA){
					var panPoint=new BMap.Point(viewA[0][0].lng,viewA[0][0].lat); 
					map.panTo(panPoint); //获取当前网点第一个区域第一个点，地图中心平移到该点
				}
			}else{
				color = "blue";
			}
			viewtheseAreas(viewA,map,color);
		}
	}
	
	
	//显示其他的区域，并且固定
	function viewtheseAreas(pointsData,map,color) {
		for (var i = 0; i < pointsData.length; i++) { //循环每一个区域
			var viewPoint; //定义显示的点坐标
			var viewPointsArr = new Array(); //定义存放点的数组，数组用于给
			for (var j = 0; j < pointsData[i].length; j++) {//每一个区域的点坐标拿到放在数组viewPointsArr里面
				var lng = pointsData[i][j].lng;
				var lat = pointsData[i][j].lat;
				viewPoint = new BMap.Point(lng, lat);
				viewPointsArr.push(viewPoint);
			}
			var viewPloygon; //定义显示的多边形
			viewPloygon = new BMap.Polygon(viewPointsArr);
			viewPloygon.setStrokeWeight(3);
			viewPloygon.setStrokeColor(color); //设置多边形颜色
			viewPloygon.setFillOpacity(0.2); 
			map.addOverlay(viewPloygon);
			viewPloygon.disableMassClear();
			viewPointsArr.length = 0;
		}
	} 
	
	
</script>

</head>
<body>
	<div class="pageContent">
		<div class="pageFormContent" layoutH="86">
			
				<div id="myMap" style="width: 900px; height: 550px;"></div>
			
		</div>
	</div>
</body>
</html>
